<script lang="ts" setup>
import { reactive, onMounted, onActivated, defineAsyncComponent, ref } from 'vue'
import { RentBikeTablePageType, BikeType } from '@/types/enum'
import IdForm from '@/components/form/IdForm.vue'
import GoButton from '@/components/basic/GoButton.vue'
import RentBikeTable from '@/components/table/RentBikeTable.vue'
import { useTable } from '@/hooks/useTable'
import { queryShortBike } from '@/api/bike'
import { queryShortBikeCol } from '@/api/bike/types/bike'
import { getToken } from '@/utils/cache/cookies'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const form = reactive({
  bikeCode: '',
  type: BikeType.All,
  storeId: route.query.storeId
})
const { data, loading, pagination, load, handleCurrentChange, handleSizeChange, setCurrentPage } =
  useTable<queryShortBikeCol>(queryShortBike, getToken() ?? '', () => form)

const onSubmit = () => {
  // 提交表单的逻辑
  setCurrentPage(1)
  load()
}
onMounted(() => {
  load()
})
const setId = (id: string) => {
  form.storeId = id
}
onActivated(() => {
  form.storeId = route.query.storeId
})
defineExpose({ load, setId })
const router = useRouter()
const bikeAMap = () => {
  if (pagination.total == 0) {
    ElMessage.error('暂无数据')
  }
  router.push({
    name: 'TimeBikeAMap',
    query: {
      storeId: form.storeId
    }
  })
}
/** 常规还车 */
const ReturnCarDialog = defineAsyncComponent(() => import('@/components/dialog/ReturnCar.vue'))
const ReturnCarDialogRef = ref<InstanceType<typeof ReturnCarDialog> | null>(null)
const openReturnCar = (id: string) => {
  ReturnCarDialogRef.value?.setId(id)
  ReturnCarDialogRef.value?.open()
}
</script>

<template>
  <id-form v-model="form" @search="onSubmit" type="bike">
    <template #after>
      <el-form-item float-right>
        <go-button icon-name="bike" @click="bikeAMap" />
      </el-form-item>
      <el-form-item prop="type" float-right>
        <el-select v-model="form.type" style="width: 120px">
          <el-option value="0" label="全部车辆" />
          <el-option value="1" label="空闲中" />
          <el-option value="2" label="断网" />
          <el-option value="3" label="使用中" />
          <el-option value="4" label="低电" />
          <el-option value="5" label="零电" />
          <el-option value="6" label="开锁" />
          <el-option value="7" label="维修" />
        </el-select>
      </el-form-item>
    </template>
  </id-form>
  <rent-bike-table
    :data="data"
    :type="form.type"
    @refresh="load"
    @nomal-return-car="openReturnCar"
    :is-in-operators-info="true"
    :page="RentBikeTablePageType.TimeRent"
    :loading="loading"
  />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
  <return-car-dialog ref="ReturnCarDialogRef" />
</template>

<style scoped></style>
